<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import ModalLeft from "@/components/ModalLeft.vue";  // 引入弹窗组件
import chinaMap from "../assets/mapJson/chaina.json"
import sichuanMap from "../assets/mapJson/四川省.json"
// 控制弹窗显示状态
const isModalVisible = ref(false);
const bianObj = ref({
  title: "北京",
  obj: {},
  bian_number: 12,
  bian_jinBao: 13,
  time: '2025-01-10 07:33Am'
})
// 省会经纬度打点
const staticSiteCityData = [
  // {
  //   name: '吉林',
  //   long: 125.3245,
  //   lat: 43.886841,
  //   area: '吉林',
  //   areaCode: [220000, 220100],
  //   desc: '吉林长春'
  // },
  // {
  //   name: '天津',
  //   long: 117.057959,
  //   lat: 39.376925,
  //   area: '天津',
  //   areaCode: [120000, 120100, 120114],
  //   desc: '天津武清'
  // },
  // {
  //   name: '北京',
  //   long: 116.405285,
  //   lat: 39.904989,
  //   area: '北京',
  //   areaCode: [110000, 110100],
  //   desc: '北京'
  // },
  // {
  //   name: '山东',
  //   long: 117.000923,
  //   lat: 36.675807,
  //   area: '山东',
  //   areaCode: [370000, 370100],
  //   desc: '山东济南'
  // },
  // {
  //   name: '河北',
  //   long: 119.586579,
  //   lat: 39.942531,
  //   area: '河北',
  //   areaCode: [130000, 130300],
  //   desc: '河北秦皇岛'
  // },
  // {
  //   name: '江苏',
  //   long: 118.767413,
  //   lat: 32.041544,
  //   area: '江苏',
  //   areaCode: [320000, 320100],
  //   desc: '江苏南京'
  // },
  // {
  //   name: '上海',
  //   long: 121.472644,
  //   lat: 31.231706,
  //   area: '上海',
  //   areaCode: [310000, 310100],
  //   desc: '上海',
  // },
  // {
  //   name: '安徽',
  //   long: 117.283042,
  //   lat: 31.86119,
  //   area: '安徽',
  //   areaCode: [340000, 340100],
  //   desc: '安徽合肥'
  // },
  // {
  //   name: '浙江',
  //   long: 121.549792,
  //   lat: 29.868388,
  //   area: '浙江',
  //   areaCode: [330000, 330200],
  //   desc: '浙江宁波'
  // },
  // {
  //   name: '四川',
  //   long: 104.065735,
  //   lat: 30.659462,
  //   area: '四川',
  //   areaCode: [510000, 510100],
  //   desc: '四川成都'
  // },
  // {
  //   name: '湖北',
  //   long: 114.298572,
  //   lat: 30.584355,
  //   area: '湖北',
  //   areaCode: [420000, 420100],
  //   desc: '湖北武汉'
  // },
  // {
  //   name: '江西',
  //   long: 115.892151,
  //   lat: 28.676493,
  //   area: '江西',
  //   areaCode: [360000, 360100],
  //   desc: '江西南昌'
  // },
  // {
  //   name: '湖南',
  //   long: 112.982279,
  //   lat: 28.19409,
  //   area: '湖南',
  //   areaCode: [430000, 430100],
  //   desc: '湖南长沙'
  // },
  // {
  //   name: '福建',
  //   long: 119.306239,
  //   lat: 26.075302,
  //   area: '福建',
  //   areaCode: [350000, 350100],
  //   desc: '福建福州'
  // },
  // {
  //   name: '广东增城',
  //   long: 113.829579,
  //   lat: 23.290497,
  //   area: '广东增城',
  //   areaCode: [440000, 440100, 440118],
  //   desc: '广东增城'
  // },
  // {
  //   name: '广东汕头',
  //   long: 116.708463,
  //   lat: 23.37102,
  //   area: '广东汕头',
  //   areaCode: [440000, 440500],
  //   desc: '广东汕头'
  // },
  // {
  //   name: '广东江门',
  //   long: 113.094942,
  //   lat: 22.590431,
  //   area: '广东江门',
  //   areaCode: [440000, 440700],
  //   desc: '广东江门'
  // },
]
// 每个省的数值参数
const provinceData = [
  { name: '北京', value: 1000 },
  { name: '天津', value: 800 },
  { name: '上海', value: 1200 },
  { name: '重庆', value: 600 },
  { name: '河北', value: 400 },
  { name: '河南', value: 500 },
  { name: '云南', value: 300 },
  { name: '辽宁', value: 700 },
  { name: '黑龙江', value: 200 },
  { name: '湖南', value: 900 },
  { name: '安徽', value: 550 },
  { name: '山东', value: 750 },
  { name: '新疆', value: 100 },
  { name: '江苏', value: 950 },
  { name: '浙江', value: 850 },
  { name: '江西', value: 450 },
  { name: '湖北', value: 650 },
  { name: '广西', value: 350 },
  { name: '甘肃', value: 250 },
  { name: '山西', value: 150 },
  { name: '内蒙古', value: 50 },
  { name: '陕西', value: 550 },
  { name: '吉林', value: 450 },
  { name: '福建', value: 750 },
  { name: '贵州', value: 150 },
  { name: '广东', value: 1300 },
  { name: '青海', value: 50 },
  { name: '西藏', value: 20 },
  { name: '四川', value: 1100 },
  { name: '宁夏', value: 80 },
  { name: '海南', value: 200 },
  { name: '台湾', value: 300 },
  { name: '香港', value: 400 },
  { name: '澳门', value: 100 },
]


// 一些自定义配置的城市
const _customAreaOptions = [
  {
    area: '北京',
    label: { position: 'top' },
  },
  {
    area: '河北秦皇岛',
    label: { position: 'right' },
  },
  {
    area: '山东济南',
    label: { position: 'right' },
  },
  {
    area: '江苏南京',
    label: { position: 'top' },
  },
  {
    area: '上海',
    label: { position: 'right' },

  },
  {
    area: '江西南昌',
    label: { position: 'right' },
  },
  {
    area: '浙江宁波',
    label: { position: 'right' },
  },
  {
    area: '福建福州',
    label: { position: 'right' },
  },
  // {
  //   area: '广东增城',
  //   label: { position: 'top' },
  // },
  // {
  //   area: '广东汕头',
  //   label: { position: 'right' },
  // },
]
let myChart: echarts.ECharts | null = null
const mapViewRef = ref(null)

const seriesData = staticSiteCityData.map(inner => {
  const { name, area, long, lat, desc } = inner
  const isCustomAreaOptions = _customAreaOptions.find(item => item.area === area)
  return {
    name: area,
    ...(isCustomAreaOptions ? isCustomAreaOptions : {}),
    value: [long, lat]
    // tooltip: { formatter: `进入${ name }` },
    // tooltip: {
    //   show: false,
    //   formatter: function (params) {
    //     return `
    //         <div class="site-tooltip">
    //             <div class="site-tooltip-title">${name}</div>
    //             <div class="site-tooltip-desc">
    //                 ${desc || '暂无介绍。。。'}
    //             </div>
    //             <div class="site-tooltip-btn" data-area="${params.name}">进入${name}</div>
    //         </div>`
    //   }
    // },
    // emphasis: {
    // labelLine: {
    //   show: true,
    // },
    // label: {
    //   formatter: `进入${ name }`,
    //   backgroundColor: '#f25955',
    //   borderColor: '#f25955',
    //   lineHeight: 24,
    //   fontSize: 16,
    //   padding: [8, 24, 8, 24],
    //   color: '#fff',
    // },
    // },
  }
})



// 初始化地图
const initMap = () => {
  if (!mapViewRef.value) return
  myChart = echarts.init(mapViewRef.value)
  echarts.registerMap('china', chinaMap);
  const option = {
    title: {
      text: '',
      left: 'center',
      right: 'center',
      top: '17%',
      textStyle: {
        fontSize: 20,
        fontFamily: 'SourceHanSansCNVF',
        fontWeight: 500,
        color: '#27C0CF',
        lineHeight: 24,
      },
    },
    // visualMap: {
    //   min: 0, // 最小值
    //   max: 1300, // 最大值
    //   left: 'left',
    //   top: 'bottom',
    //   text: ['高', '低'], // 文本，默认为数值
    //   calculable: true, // 是否显示拖拽手柄
    //   inRange: {
    //     color: ['#e0ffff', '#006edd'], // 颜色范围
    //   },
    // },
    tooltip: {
      show: false,
      enterable: true
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      roam: true,
      label: {
        show: false, // 不显示省份名称
      },
      scaleLimit: {
        min: 1, // 最小缩放比例
        max: 5  // 最大缩放比例
      },
      selectedMode: 'single',
      itemStyle: {
        areaColor: '#343434', //地图颜色
        borderColor: 'rgba(255,255,255,0.4)',   //边框颜色 
        borderWidth: 1, // 边框宽度
      },
      select: {
        label: {
          show: false,
        },
        itemStyle: {
          areaColor: '#191919',  //选中后的颜色 
        },
      },
      emphasis: {
        label: {
          show: true,
          color: '#fff', // 地名颜色
          fontSize: 14 // 地名字体大小
        },
        itemStyle: {
          areaColor: '#191919',  //悬浮上去后的颜色
          borderColor: 'rgba(255,255,255,0.4)',
        },
      },
    },
    // labelLine: { 
    //   show: false,
    //   length2: 30,
    //   minTurnAngle: 110,
    // },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbolSize: 8,
        data: seriesData,
        label: {
          formatter: '{b}',
          position: 'bottom',
          show: true,
          color: 'rgba(255,255,255,0.8)',
          fontWeight: 400,
          fontSize: 14,
          fontFamily: 'SourceHanSansCNVF',
          lineHeight: 26,
        },
        markPoint: {
          // symbol: 'image://https://yangtao.xyz/assets/warbler1-b0661579.jpeg', // 使用自定义图片
          symbol: 'image://https://yangtao.xyz/zhong_image/red111.png', // 使用自定义图片

          symbolSize: 40,
          itemStyle: {
            color: '#ff0000',
          },
          data: [
            { name: '四川', coord: [104.065735, 30.659462] }, // [经度, 纬度]
            { name: '上海', coord: [121.48, 31.22] },
            { name: '铁门关市', coord: [85.501218, 41.827251] },
            { name: '武汉', coord: [114.298572, 30.584355] },
            { name: '锡林郭勒盟', coord: [116.090996, 43.944018] },
            { name: '太原', coord: [112.549248, 37.857014] },
            { name: '日喀则市', coord: [88.885148, 29.967519] }
          ],
        },
        // 圆点
        itemStyle: {
          color: '#fff',
          opacity: 1,
          borderWidth: 1,
          borderColor: 'rgba(0,0,0,0.15)',
        },
        // 移入的时候
        emphasis: {
          // 放大1.5
          scale: 1.5,
          itemStyle: {
            color: '#ffffff',
            borderColor: 'rgba(103,118,0,0.2)',
          },
        },
        tooltip: {
          backgroundColor: '#155DFF',
          borderColor: '#155DFF',
          padding: [24, 12, 16, 12],
          textStyle: {
            color: '#fff',
          }
        },
      },
      // {
      //   type: 'map',
      //   map: 'china',
      //   data: provinceData, // 绑定数值参数
      //   name: '数值',
      //   label: {
      //     show: true, // 显示省份名称
      //     formatter: '{b}', // 显示名称
      //     color: '#333', // 标签颜色
      //   },
      //   itemStyle: {
      //     areaColor: '#f0f0f0', // 默认区域颜色
      //   },
      // },
    ],
  };
  myChart?.setOption(option, true); //设置option
  // 监听地图点击事件
  myChart.on('click', (params) => {
    isModalVisible.value = true;
    if (params.name) {
      // 查找 provinceData 中对应的值
      const province = provinceData.find(item => item.name === params.name);
      if (province) {
        // console.log(params.name,'点击的省份数据:', province);
        bianObj.value.obj = province
      }
      // 查找 staticSiteCityData 中对应的值
      const city = staticSiteCityData.find(item => item.area === params.name);
      if (city) {
        const provinceA = provinceData.find(item1 => item1.name === city.name);
        bianObj.value.obj = provinceA
        // console.log('点击的城市数据:', provinceA);
      }
      console.log(params.name, '点击的省份数据:', bianObj.value);

      // alert(`您点击了: ${params.name}`) // 弹窗显示点击的区域名称
    } else if (params.data) {
      console.log('点击的坐标:', params.data.value)
      // alert(`您点击了坐标: ${params.data.value}`) // 弹窗显示点击的坐标
    }
  })
  // 监听地图缩放事件
  // myChart.on('georoam', (params) => {
  //   const zoom = params.zoom // 当前缩放级别
  //   if (zoom) {
  //     // 动态调整字体大小
  //     const fontSize = Math.max(12, Math.min(24, 12 * zoom)) // 字体大小范围：12px - 24px
  //     myChart?.setOption({
  //       geo: {
  //         label: {
  //           fontSize: fontSize,
  //         },
  //       },
  //       series: [
  //         {
  //           label: {
  //             fontSize: fontSize,
  //           },
  //         },
  //       ],
  //     })
  //   }
  // })
  // myChart.on('georoam', (params) => {
  //   const zoom = params.zoom; // 当前缩放级别
  //   console.log("====params=>",zoom)  
  //   if (zoom > 1) {
  //     // 放大到一定级别后，切换到广东省地图
  //     myChart?.setOption({
  //       geo: {
  //         map: 'guangdong', // 切换到广东省地图
  //         zoom: 5, // 设置缩放级别
  //         center: [113.23, 23.16], // 设置中心点（广东省中心）
  //       },
  //       series: [
  //         {
  //           map: 'guangdong',
  //           data: [
  //             { name: '广州市', value: 1000 },
  //             { name: '深圳市', value: 800 },
  //             { name: '珠海市', value: 600 },
  //             { name: '佛山市', value: 400 },
  //             { name: '东莞市', value: 200 },
  //           ],
  //           label: {
  //             show: true, // 显示市名称
  //             formatter: '{b}', // 显示名称
  //             position: 'inside', // 标签位置
  //           },
  //         },
  //       ],
  //     });
  //   } else {
  //     // 缩小到一定级别后，切换回中国地图
  //     myChart?.setOption({
  //       geo: {
  //         map: 'china', // 切换回中国地图
  //         zoom: 1, // 设置缩放级别
  //         center: [104.114129, 37.550339], // 设置中心点（中国中心）
  //       },
  //       series: [
  //         {
  //           map: 'china',
  //           data: [],
  //           label: {
  //             show: false, // 隐藏名称
  //           },
  //         },
  //       ],
  //     });
  //   }
  // });
}


// 组件卸载时清理
onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
  }
})

onMounted(() => {
  initMap()
})
</script>

<template>
  <div class="map-wrapper">
    <!-- 地图组件 -->
    <div ref="mapViewRef" class="map-container"></div>
  </div>
  <!-- 使用弹窗组件 -->
  <ModalLeft v-model:visible="isModalVisible" :bianObj="bianObj"></ModalLeft>
</template>

<style scoped lang="scss">
.map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  // background: #2d2d2d;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;

  .map-container {
    position: relative;
    flex: 1;
    width: 100%;
  }
}
</style>
